<template>
  <div class="stell-home-header">
    <div class="stell-home-view stell-home-view1">
      <img :src="`${imgUrl}logo2.png`" alt="" @click="router.push('/home');" />
      <div class="stell-home-view1__content">
        <div class="router-view">
          <div
            class="router-name"
            @click="handleClickTab(item)"
            v-for="item in headerData"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="login-view">
          <span class="login">登录</span>
          <span class="experience" @click="show = true">开始体验</span>
        </div>
      </div>
    </div>

    <div class="stell-home-view stell-home-view2">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane
          v-for="item in tabsData"
          :label="item.name"
          :name="item.name"
        ></el-tab-pane>
      </el-tabs>
    </div>
  </div>
  <access-services-dialog
    v-model="show"
    @close="show = !show"
    @handleConfirm="handleConfirm"
  />
  <service-telephone-dialog v-model="show1" @close="show1 = !show1" />
</template>
<script lang="ts" setup>
import { ref } from "vue";
import AccessServicesDialog from "@/components/access-services-dialog/index.vue";
import ServiceTelephoneDialog from "@/components/service-telephone-dialog/index.vue";
import { imgUrl } from "@/utils/common";
import { headerData, tabsData } from "./constants.ts";
import { useRouter } from "vue-router";
const router = useRouter();
const show = ref(false);
const show1 = ref(false);
const activeName = ref("行业头条");
const handleClick = () => {};
const handleClickTab = (item: any) => {
  router.push(item.url);
};
const handleConfirm = () => {
  show.value = false;
  show1.value = true;
};
</script>
<style lang="scss" scoped>
.stell-home-header {
  width: 1920px;
  height: 120px;
  background: #ffffff;
  box-shadow: 0px 4px 15px 0px rgba(209, 209, 209, 0.2);
  border-radius: 0px 0px 0px 0px;
  /* margin-bottom: 24px; */
  display: flex;
  flex-direction: column;
  .stell-home-view {
    width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .stell-home-view1 {
    flex: 1;
    .stell-home-view1__content {
      display: flex;
      align-items: center;
      .router-view {
        height: 100%;
        display: flex;
        align-items: center;
        .router-name {
          width: 56px;
          height: 20px;
          font-weight: 400;
          font-size: 14px;
          color: #7a869a;
          margin: 0 20px;
          cursor: pointer;
          &:hover {
            color: #1678ff;
          }
        }
      }
      .login-view {
        display: flex;
        span {
          width: 90px;
          height: 40px;
          text-align: center;
          line-height: 40px;
          border-radius: 3px 3px 3px 3px;
          border: 1px solid #1678ff;
          margin-left: 16px;
          cursor: pointer;
        }
        .login {
          color: #1678ff;
          &:hover {
            background-color: rgba($color: #1678ff, $alpha: 0.1);
          }
        }
        .experience {
          background-color: #1678ff;
          color: #ffffff;
          &:hover {
            opacity: 0.9;
          }
        }
      }
    }
    img {
      cursor: pointer;
    }
  }
}
:deep(.el-tabs) {
  height: 52px;
  width: 1280px;
  border-color: rgba($color: #000000, $alpha: 0);
}
:deep(.el-tabs__nav) {
  height: 50px;
}
:deep(.el-tabs__header) {
  margin-bottom: 0;
}
:deep(.el-tabs__nav-wrap::after) {
  background-color: rgba($color: #000000, $alpha: 0);
}
</style>
